<template>
  <div class="app-container">
    <el-card>
      <h3>订单:</h3>
      <el-table
        :data="orderList"
        :border="false"
        fit
        style="width: 100%;"
      >
        <el-table-column label="日期">
          <template slot-scope="{row}">
            <span>{{ row.dt }}</span>
          </template>
        </el-table-column>
        <el-table-column label="使用现金">
          <template slot-scope="{row}">
            <span>{{ +row.m }}</span>
          </template>
        </el-table-column>
        <el-table-column label="使用余额">
          <template slot-scope="{row}">
            <span>{{ +row.b }}</span>
          </template>
        </el-table-column>
        <el-table-column label="总共">
          <template slot-scope="{row}">
            <span>{{ +row.b + +row.m }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <p></p>
    <el-card>
      <h3>支付流水:</h3>
      <el-table
        :data="payList"
        :border="false"
        fit
        style="width: 100%;"
      >
        <el-table-column label="日期">
          <template slot-scope="{row}">
            <span>{{ row.dt }}</span>
          </template>
        </el-table-column>
        <el-table-column label="金额">
          <template slot-scope="{row}">
            <span>{{ +row.total }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <p></p>
    <el-card>
      <h3>后台充值:</h3>
      <el-table
        :data="refillList"
        :border="false"
        fit
        style="width: 100%;"
      >
        <el-table-column label="日期">
          <template slot-scope="{row}">
            <span>{{ row.dt }}</span>
          </template>
        </el-table-column>
        <el-table-column label="金额">
          <template slot-scope="{row}">
            <span>{{ +row.total }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <p></p>
    <el-card>
      <h3>提现列表:</h3>
      <el-table
        :data="cashList"
        :border="false"
        fit
        style="width: 100%;"
      >
        <el-table-column label="日期">
          <template slot-scope="{row}">
            <span>{{ row.dt }}</span>
          </template>
        </el-table-column>
        <el-table-column label="金额">
          <template slot-scope="{row}">
            <span>{{ +row.total }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>

import api from '@/api'

export default {
  data() {
    return {
      payList: [],
      cashList: [],
      orderList: [],
      refillList: []
    }
  },
  created() {
  },
  mounted() {
    this.getTotal()
  },
  methods: {
    getTotal() {
      api.finance.getDataTotal().then(response => {
        const { data } = response
        this.payList = data.pay
        this.cashList = data.cash
        this.orderList = data.order
        this.refillList = data.refill
      })
    }
  }
}
</script>
